<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 20px">
      <el-form-item label="统计区域">
<!--        区域值 formInline.region-->
        <avue-select v-model="formInline.region" placeholder="请选择统计区域" type="tree" :dic="regionDic"></avue-select>
      </el-form-item>
      <el-form-item label="对比方式">
<!--        对比方式 radio-->
        <el-radio v-model="radio" label="1">同比</el-radio>
        <el-radio v-model="radio" label="2">环比</el-radio>
      </el-form-item>
      <el-form-item v-if="radio" label="对比时间段">
<!--        对比时间段 formInline.time-->
        <avue-select v-if="radio==1" multiple style="width: 600px" v-model="formInline.time" placeholder="请选择对比时间段" type="tree" :dic="timeDic1"></avue-select>
        <avue-checkbox v-if="radio==2" v-model="formInline.time" placeholder="请选择内容" :dic="timeDic2"></avue-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">对比</el-button>
      </el-form-item>
    </el-form>

    <tb v-if="show===1" :dataList="dataList" :resDesc="resDesc"  :years="this.formInline.time"></tb>
    <hb v-if="show===2" :dataList="dataList" :resDesc="resDesc"></hb>


  </div>
</template>

<script>
import { areaDesc, hb, resDesc, tb } from '@/api/dataComparison'
import Tb from '@/components/dataCompares/tb'
import Hb from '@/components/dataCompares/hb'
export default {
  name: "index",
  components: {
    Tb,
    Hb
  },
  data(){
    return {
      dataList:[],
      resDesc:[],
      show:0,
      regionDic:[],
      form1:"",
      formInline:{
        region:'wlq',
        time:[]
      },
      radio:0,
      typeDic:[
        {
          label:"同比",
          value:"0",
        },
        {
          label:"环比",
          value:"1",
        },
      ],
      timeDic1:[],
      timeDic2:[],
      // yearsList:''
    }
  },
  created() {
    this.getAreaValue()
    this.getData()
    this.setYears()
  },
  mounted() {
  },
  methods: {
    async getAreaValue() {
      this.regionDic = [];
      await areaDesc().then((res) => {
        for (let area of res.data) {
          let option = {
            value: area.value,
            label: area.desc,
          };
          this.regionDic.push(option);
        }
      });
    },
    setYears() {
      let myDate = new Date();
      let year = parseInt(myDate.getFullYear());
      for (let index = 2013; index <= year; index++) {
        let option = {
          value: index,
          label: index,
        };
        this.timeDic1.push(option)
      }
      // return options;
    },
    async getHBData() {
      let res = await hb(this.formInline.region);
      return res.data;
    },
    async getTBData() {
      let res = await tb(this.formInline.region, this.formInline.time.join(","));
      return res.data;
    },
    async getResDesc() {
      let res = await resDesc(this.formInline.region);
      return res.data;
    },
    async getData() {
        this.dataList = await this.getHBData();
        this.resDesc = await this.getResDesc();
        this.show = 2;
      },
    async onSubmit(){
      this.show=0;
        if (this.radio==1) {
          this.dataList = await this.getTBData();
          this.resDesc = await this.getResDesc();
          this.show = 1;
        } else {
          this.dataList = await this.getHBData();
          this.resDesc = await this.getResDesc();
          this.show = 2;
        }
    }
  },
}
</script>

<style scoped>

</style>

